<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展开语法</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>hdcms</div>
    <div>hoduuren</div>
</body>
</html>
<script>
    //使用展开语法将nodelist转化为数组
    // let divs = document.querySelectorAll("div");
    // [...divs].map(function(div){
    //     div.addEventListener("click",function(){
    //         //给当前的dom节点加上类 hide
    //         console.log(this.classList.toggle('hide'))
    //     });
    // });


    // const divs = document.querySelectorAll('div');
    // Array.from(divs).map(function(item){
    //     item.addEventListener('click',function(){
    //         this.classList.toggle('hide');
    //     });
    // });
    const divs = document.querySelectorAll('div');
    //使用数组原型的方式进行处理
    Array.prototype.map.call(divs,function(item){
        item.addEventListener('click',function(){
            this.classList.toggle('hide');
        });
    });

    //展开语法
    //数组合并
    // let a = [1,2,3];
    // let b = ['a','houdunren',...a];
    // console.log(b)

    // function hd(...args){
    //     console.log(args)
    // }
    // hd(1,2,3,'厚度柔嫩');

    //也可以用于接受部分参数
    // function hd(site,...args){
    //     console.log(site,args)
    // }
    // //这边相当于  site代表第一个参数   后面的三个当做一个参数以数组的形式存在
    // hd('厚度柔嫩',1,2,3);


</script>